<template lang="pug">
  .global-container
    .global-container-header
      .title 个人信息修改
    .global-container-content.global-container-operate
      .operate-content
        .operate-content-body
          .operate-content-header 基础信息
          .flex-row
            .left-header.view-left-header
              span.necessary *
              | 用户名:
            | {{userName}}
          .flex-row
            .left-header
              | 头像:
            .upload-img
              .upload-img-div.theme-color.theme-bd(v-if="!headingUrl")
                i.iconfont.icon-tianjiajiahao
              .img-div(v-else)
                img(:src="$utils.imgPath(headingUrl)")
                i.iconfont.icon-guanbi(@click="headingUrl = ''")
              Cropper.cropper(@save="changeHeadingUrl")
          .flex-row
            .left-header
              | 生日:
            SelectCalendarSingle(:needTitle="false", :timeIsShow="false", width="260px", topCss="top: 40px", :useTime="moment(userBirth).format('YYYY-MM-DD')", @selectOption="selectUserBirth")
          .flex-row
            .left-header
              | 邮箱:
            input(placeholder="请输入邮箱", v-model="userEmail", maxlength=30)
          .flex-row
            .left-header
              | 手机号:
            input(placeholder="请输入手机号", v-model="userPhone")
          .flex-row
            .left-header
              | 性别:
            .row-radio
              NativeRadio(worth="1", v-model="userSex")
              span 男
            .row-radio
              NativeRadio(worth="2", v-model="userSex")
              span 女
          .flex-row
            .left-header
              | 简介:
            textarea(placeholder="请输入简介,不超过300字", v-model="userAutograph", maxlength=300)
      .operate-btn
        .btn.btn-cancel(@click="$router.push('/personal')") 取消
        .btn.btn-save(@click="save") 保存
</template>

<script>
import Cropper from '../../components/Cropper'
import NativeRadio from '../../components/NativeRadio'
import SelectCalendarSingle from '../../components/SelectCalendar/SelectCalendarSingle'
import {get} from '@utils/util'
import moment from 'moment'
export default {
  data () {
    return {
      moment,
      headingUrl: '',
      userName: '',
      userEmail: '',
      userPhone: '',
      userSex: '1',
      userBirth: '',
      userAutograph: ''
    }
  },
  methods: {
    async save () {
      const {code, data} = (await this.$http.post('/manage/user/update-user', {
        id: this.userInfo.id,
        headingUrl: this.headingUrl,
        userEmail: this.userEmail,
        userPhone: this.userPhone,
        userSex: this.userSex,
        userBirth: this.userBirth + ' 00:00:00',
        userAutograph: this.userAutograph
      })).data
      if (code === 0) {
        this.$store.set('base/userInfo', data)
        this.$store.set('dialog/blackInfo', {
          show: true,
          text: '保存成功'
        })
        setTimeout(() => {
          this.$router.push('/personal')
        }, 2000)
      }
    },
    selectUserBirth (val) {
      this.userBirth = val
    },
    changeHeadingUrl (url) {
      this.headingUrl = url
    }
  },
  computed: {
    userInfo: get('base/userInfo')
  },
  mounted () {
    Object.assign(this, this.userInfo)
  },
  validator: {
    userPhone: {
      mobile: true
    }
  },
  components: {Cropper, NativeRadio, SelectCalendarSingle}
}
</script>

<style scoped lang="stylus">
  .upload-img
    position relative
    .img-div
      width 100px
      height 100px
      border-radius 5px
      position relative
      img
        width 100px
        height 100px
        border-radius 5px
      i
        position absolute
        color red
        right -8px
        top -8px
        cursor pointer
    .upload-img-div
      width 100px
      height 100px
      line-height 100px
      text-align center
      border-radius 5px
      i
        font-size 50px
    .cropper
      position absolute
      width 100px
      height 100px
      left 0
      top 0
</style>
